<template>
  <div class="m-cards-manage">
    <p class="m-title">银行卡管理</p>
    <div class="m-car-list">
      <!-- 银行卡 -->
      <div class="m-card-item card" v-for="(item, index) in 3" :key="index" @mouseover="curIndex = index" @mouseout="curIndex = -1">
        <div class="card-info">
          <div class="card-sing">
            <img src="../../assets/my/icon_card_sing.png" alt="">
          </div>
          <div class="card-name">中国建设银行</div>
        </div>
        <div class="card-num">6222 **** **** 6789</div>
        <!-- 银行卡操作 -->
        <div class="m-card-options" v-show="curIndex == index">
          <div class="options">
            <div class="op-item" @click="onDelCard">
              <div class="icon-card">
                <img src="../../assets/my/icon_card_del.png" alt="">
              </div>
              <span>解除绑定</span>
            </div>
            <div class="op-item">
              <div class="icon-card">
                <img src="../../assets/my/icon_card_edit.png" alt="">
              </div>
              <span>修改</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 新增 -->
      <div class="m-card-item m-add" @click="$router.push('/my/cardsinfo')">
        <div class="add-icon">
          <img src="../../assets/my/icon_add.png" alt="">
        </div>
        <span>新增银行卡</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curIndex: -1
    }
  },
  methods: {
    /**
     * 解除银行卡绑定
     */
    onDelCard() {
      this.$modal({
        title: '提示',
        content: '解除银行卡绑定?',
        onConfirm() {
          this.curIndex = -1
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.m-title {
  font-size: 16px;
  margin-bottom: 20px; 
  font-weight: bold;
}
.m-car-list {
  .m-card-item {
    position: relative;
    cursor: pointer;
    display: inline-block;
    width:280px;
    height:130px;
    padding: 20px;
    border-radius:10px;
    margin: 0 30px 30px 0;
    color: #ffffff;
    &.card {
      background:linear-gradient(90deg,rgba(74,130,186,1) 0%,rgba(61,92,168,1) 100%);
    }
    // hover
    .m-card-options {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      border-radius:10px;
      background:rgba(50,50,50,0.5);
      .options {
        position: absolute;
        width: 100%;
        bottom: 0;
        height: 40px;
        border-radius: 0px 0 8px 8px;
        background: #CFD7DC;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #2A98D7;
      }
      .op-item {
        flex: 1;
        text-align: center;
        &:first-child {
          border-right: 1px solid #F5F6F9;
        }
        span {
          vertical-align: super
        }
      }
      .icon-card {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        display: inline-block;
      }
    }
    .card-info {
      & > div {
        display: inline-block;
        vertical-align: middle;
      }
    }
    .card-sing {
      width: 24px;
      height: 24px;
    }
    .card-name {
      margin-left: 4px;
    }
    .card-num {
      font-size: 18px;
      position: absolute;
      bottom: 20px;
    }
    &.m-add {
      text-align: center;
      border: 1px solid #878787;
      vertical-align: bottom;
      .add-icon {
        width: 36px;
        height: 36px;
        margin: 10px auto 10px;
      }
      span {
        color: #878787;
      }
    }
  }
}
</style>
